<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    {{template "link/customer/link.html" . }}
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <style>
            .btn-left{
                float: left;
            }
            .btn-right{
                float: right;
            }
    </style>
</head>
<body>
{{template "link/customer/nav.html" . }}
{{template "link/customer/header.html" .}}
<div class="layui-main">
    <div class="layui-row">
        <legend class="registerWord">订单联系人</legend>
    </div>
    <div class="layui-row">
        <div class="layui-col-lg-offset3 layui-col-lg6">
            <div class="register">
                <form class="layui-form" action="/customer/addOrderEx" method="post" id="form">
                    <input type="text" value="{{.OrderId}}" hidden="hidden" name="orderId">
                    <div class="layui-form-item">
                        <label class="layui-form-label">联系人姓名</label>
                        <div class="layui-input-block">
                            <input class="layui-input" type="text" placeholder="请输入账号" name="username"
                                   lay-verify="required">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">联系人电话</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" name="userphone">
                        </div>
                    </div>

                    <div class="layui-form-item selectArea">
                        <div>
                            <label class="layui-form-label" id="addr">地址</label>
                        </div>
                        <select id="province" name="province">
                            <option value="1">请选择省</option>
                        </select>

                        <select id="city" name="city">
                            <option value="2">请选择市</option>
                        </select>

                        <select id="area" name="area">
                            <option value="3">请选择区</option>
                        </select>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">街道</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" name="address">
                        </div>
                    </div>

                    <div class="layui-row registerBtn">
                        <div class="btn-left">
                            <button class="layui-btn" type="button">取消</button>
                        </div>
                        <div class="btn-right">
                            <button class="layui-btn" id="regBtn" type="button">下单</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{{template  "link/customer/footer.html" .}}
<script src="/static/js/citys.js"></script>
<script>
    layui.config({
        base: '/static/js/util/' //你存放新模块的目录，注意，不是layui的模块目录
    }).use(['jquery', 'layer', 'form','element','mm'], function (args) {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        getProvince();
        form.render("select");
        $("input").blur(function () {
            var inputValue = $(this).val();
            if ($.trim(inputValue) == '' || $.trim(inputValue) == null) {
                layer.tips('不能为空', this);
                return false;
            }
        });
        $("input[name='userphone']").blur(function () {
            function isPhoneNo(phone) {
                var pattern = /^1[34578]\d{9}$/;
                return pattern.test(phone);
            }

            if (!isPhoneNo($(this).val())) {
                layer.tips("手机格式错误", this);
                return false;
            }
        });

        form.on('select', function (data) {
            if (data.elem == $("#province")[0]) {
                chooseProvince(data.elem);
            }
            if (data.elem == $("#city")[0]) {
                chooseCity(data.elem);
            }
            form.render();

        });

        $("#regBtn").click(function () {

            if ($.isNumeric($("#province").val())) {
                layer.tips("请选择", $("#addr"), {
                    tips: 2
                })
                return false;
            }
            if ($.isNumeric($("#city").val())) {
                layer.tips("请选择", $("#addr"), {
                    tips: 2
                })
                return false;
            }
            if ($.isNumeric($("#area").val())) {
                layer.tips("请选择", $("#addr"), {
                    tips: 2
                })
                return false;
            }
            $("#form").submit()
        });

    });
</script>
</body>
</html>